<!--  -->
<template>
  <div class='mqttA'>
    <!-- <div v-for="item in mesList">
      <div>{{ item.msg }}</div>
    </div> -->
    <el-row style="height: 500px; overflow-x: auto;">
      <template>
        <el-row v-for="item in mesList">
          <el-col :span="8" :offset="8" v-if="item.type == 0"
            style="text-align: left; word-wrap: break-word;margin-bottom: 10px;">
            <div>{{ item.msg }}</div>
          </el-col>
          <el-col :span="8" :offset="8" v-else style="text-align: right;word-wrap: break-word;margin-bottom: 10px;">
            <div>{{ item.msg }}</div>
          </el-col>
        </el-row>
      </template>
      <div ref="bottomBox" style="margin-bottom: 20px;"></div>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7" :offset="8">
        <el-input v-model="input" placeholder="请输入内容" type="textarea" :rows="2"></el-input>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" @click="sendHandle">发送</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7" :offset="8">
        <el-input v-model="inputB" placeholder="请输入内容" type="textarea" :rows="2"></el-input>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" @click="sendHandleB">发送</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//import 《组件名称》 from '《组件路径》';
import { connect } from 'mqtt/dist/mqtt.js';
//const mqttUrl = 'wxs://mqttt.weyusmarthome.xyz:8084/mqtt';
// const mqttUrl = 'wxs://mqtt.wenyuubutu.xyz:8084/mqtt';
const mqttUrl = 'ws://114.132.77.113:8083/mqtt';
export default {
  components: {},
  name: 'mqttA',
  data() {
    return {
      input: '',
      inputB: '',
      client: null,
      mesList: []
    };
  },
  methods: {
    sendHandle() {
      let that = this
      const msg = JSON.stringify({ msg: this.input, type: 1 })
      this.client.publish(
        "testtopic/pub",
        msg,
        function (err) {
          if (!err) {
            console.log("成功下发命令——关闭报警器");
            that.mesList.push(JSON.parse(msg))
            that.scrollToTarget()
          }
        }
      );
    },
    sendHandleB() {
      let that = this
      const msg = JSON.stringify({ msg: this.inputB, type: 0 })
      this.client.publish(
        "testtopic",
        msg,
        function (err) {
          if (!err) {
            console.log("成功发送！");
            // that.mesList.push(JSON.parse(msg))
            that.scrollToTarget()
          }
        }
      );
    },
    scrollToTarget() {
      const targetElement = this.$refs.bottomBox
      console.log("targetElement", targetElement);
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    var that = this;
    console.log("8888888888888888");
    that.client = connect(mqttUrl);
    that.client.on("connect", function () {
      console.log("成功连接mqtt服务器！");
      that.client.subscribe("testtopic", function (err) {
        if (!err) {
          console.log("成功订阅设备上行数据Topic!");
        }
      });
    });
    that.client.on("message", function (topic, message) {
      console.log(JSON.parse(message));
      // message是16进制的Buffer字节流
      that.mesList.push(JSON.parse(message))
      that.scrollToTarget()
    })

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.mqttA {
  width: 90%;
  box-sizing: border-box;
  // display: flex;
  // justify-content: center;
  // .inputBox{
  //   width: 80%;
  // }
}
</style>